<template>
  <div class="box">
    <div class="left">
      <div class="leftTop" style="text-align: center;" ref="myLeftTop">
        <h3 class="myH3">年台数一览</h3>
          <el-table :header-cell-style="{background:'#5f5f5f',color:'#fff'}"
            :data="nianShouRu"
            border
            :height="this.myLeftTopHeight"
            size="mini"
                :row-style="{height:'35px'}"
                :cell-style="{padding:'0px'}"
            style="width: 100% ;font-size: 16px ; font-weight: bold;">
            <el-table-column align="center"
              prop="date"
              label="内容"
              width="120%"
              >
            </el-table-column>
            <el-table-column align="center"
              prop="name"
              label="新车销售台数"
              >
            </el-table-column>
            <el-table-column align="center"
              prop="num1"
              label="二手车销售台数">
            </el-table-column>
            <el-table-column align="center"
              prop="num2"
              label="维修进厂台数">
            </el-table-column>
          </el-table>
      </div>
      <div class="leftMiddle">
        <div class="Echarts3"  style="width: 100%; height:100%;">
          <div id="main3"  style="width: 100%; height:100%;"></div>
        </div>
      </div>
      <div class="leftBottom" align="center">
        <!-- <h3 class="myH3">售后维修综合收入一览</h3> -->
        <div class="Echarts2"  style="width: 100%; height:100%;">
          <div id="main2"  style="width: 100%; height:100%;"></div>
        </div>
      </div>
    </div>
    <div class="right">
      <div class="right1">
        <div class="Echarts"  style="width: 100%; height:100%;">
          <div id="main"  style="width: 100%; height:100%;"></div>
        </div>
      </div>
      <div class="right2">
        <div class="right2Top">
          <div class="right2TopRight" >
            <h1 class="myH1">￥335,85,433</h1>
            <h3 class="my_H3">燃油车库存数量（台）</h3>
          </div>
          <div class="right2TopLeft">
            <h1 class="myH1">￥335,85,433</h1>
            <h3 class="my_H3">新能源车库存数量（台）</h3>
          </div>
        </div>
        <div class="right2Bottom">
          <div class="right2BottomRight">
            <h1 class="myH1">￥335,85,433</h1>
            <h3 class="my_H3">二手车库存数量（台）</h3>
          </div>
          <div class="right2BottomLeft">
            <h1 class="myH1">￥335,85,433</h1>
            <h3 class="my_H3">配件库存数量（台）</h3>
          </div>
        </div>
      </div>
      <div class="right3" ref="myRight3">
        <h3 class="myH3">库存时间与台数</h3>
          <el-table :header-cell-style="{background:'#5f5f5f',color:'#fff'}"
            :data="kuCunShiJian"
            border
            size="mini"
            :height="this.myRight3Height"
                :row-style="{height:'33px'}"
                :cell-style="{padding:'0px'}"
            style="width: 100% ;font-size: 16px ; font-weight: bold;">
            <el-table-column align="center"
              prop="time"
              label="天数"
              width="120%"
              >
            </el-table-column>
            <el-table-column align="center"
              prop="OldTaiShu"
              label="燃油车"
              >
            </el-table-column>
            <el-table-column align="center"
              prop="OldJinEr"
              label="新能源车">
            </el-table-column>
            <el-table-column align="center"
              prop="NewTaiShu"
              label="二手车">
            </el-table-column>
          </el-table>
      </div>
    </div>
  </div>
</template>

<script>
  window.onresize = function(){
     location.reload()
  }
  export default{
    data() {
      return {
        sum:[],sum2:[],a1:[],b1:[],c1:[],d1:[],

        data3:[45, 70, 97, 700, 65,43,53,25,52],//售后部衍生收入
        data2:[55, 63, 32, 90, 45,43,53,65,54],//售后部维修收入
        data4:[45, 70, 97, 70, 65,43,53,55,55],//销售部整车收入
        data5:[55, 63, 32, 30, 45,43,53,25,45],//销售部衍生收入
        nianShouRu: [{date:'收入（元)',name :'￥23,213,232',num1:'￥31,242,543',num2:'￥3,534,324'},{date:'成本（元）',name :'23545',num1:'21312431',num2:'1243524'},{date:'毛利（元）',name :'124235',num1:'65464',num2:'2343'},{date:'毛利率（%）',name :'30%',num1:'39%',num2:'20%'},],
        myLeftTopHeight:null,
        myRight3Height:null,
        kuCunShiJian:[
           {time:'1-29天',OldTaiShu:'21',OldJinEr:'23803',NewTaiShu:'32',NewJinEr:'4325',},
           {time:'30-39天',OldTaiShu:'21',OldJinEr:'23803',NewTaiShu:'32',NewJinEr:'4325',},
           {time:'40-49天',OldTaiShu:'21',OldJinEr:'23803',NewTaiShu:'32',NewJinEr:'4325',},
           {time:'50-59天',OldTaiShu:'21',OldJinEr:'23803',NewTaiShu:'32',NewJinEr:'4325',},
           {time:'60-69天',OldTaiShu:'21',OldJinEr:'23803',NewTaiShu:'32',NewJinEr:'4325',},
           {time:'70-79天',OldTaiShu:'21',OldJinEr:'23803',NewTaiShu:'32', NewJinEr:'4325',},
           {time:'80-89天',OldTaiShu:'21',OldJinEr:'23803',NewTaiShu:'32',NewJinEr:'4325',},
           {time:'90-99天',OldTaiShu:'21',OldJinEr:'23803',NewTaiShu:'32',NewJinEr:'4325',},
           {time:'100-109天',OldTaiShu:'21',OldJinEr:'23803',NewTaiShu:'32', NewJinEr:'4325', },
           {time:'110-∞天',OldTaiShu:'21',OldJinEr:'23803',NewTaiShu:'32',NewJinEr:'4325',},
        ],
      }
    },
    methods:{
      myEcharts(){
        // 基于准备好的dom，初始化echarts实例
        var myChart = this.$echarts.init(document.getElementById('main'));
        // 指定图表的配置项和数据
        var option = {
      	   title: {
      	          text: '新能源车收入占比',
      	          left: 'left',
                  textStyle:{
                     fontSize:23 //标题大小
                  }
      	      },
      	      tooltip: {
      	          trigger: 'item',
                  formatter: '{a} <br/>{b} : {c} ({d}%)'      //显示比例
      	      },
      	      legend: {                      //图例组件
      	          orient: 'vertical',
      	          left: 'left',
                  bottom:'20px',

      	      },
              toolbox: {
                  show: true,
                  feature: {
                      dataView: {readOnly: true},        //readOnly只读模式
                      magicType: {type: []},
                     // restore: {},
                      saveAsImage: {}
                  }
              },

      	      series: [
      	          {
                      center:["60%","55%"],
      	              name: '访问来源',
      	              type: 'pie',
      	              radius: '70%',      //饼状图大小
      	              data: [
      	                  {value: 0.25, name: '销售整车毛利'},
      	                  {value: 0.30, name: '销售衍生毛利'},
      	                  {value: 0.40, name: '售后维修毛利'},
                          {value: 0.10, name: '售后衍生毛利'},
      	              ],
      	              emphasis: {
      	                  itemStyle: {
      	                      shadowBlur: 10,
      	                      shadowOffsetX: 0,
      	                      shadowColor: 'rgba(0, 0, 0, 0.5)',
      	                  }
      	              },

      	          },

      	      ]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
        },
        //左3 柱形图
        myEcharts2(){
           var a = this.data2
           var b = this.data3

          var myChart = this.$echarts.init(document.getElementById('main2'));
          var option2 = {
            title: {
                   text: '售后维修综合收入一览',
                   left: 'center',
                   textStyle:{
                      fontSize:20 //标题大小
                   }},
              tooltip : {
                  trigger: 'axis',
                  axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                      type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                  },
                  formatter:'{b}<br/>{a0} : {c0} %<br/>{a1} : {c1} %'
              },
              legend: {
                left: 'left',
                  data: ['售后部维修收入', '售后部衍生收入']
              },
              toolbox: {
                  show: true,
                  feature: {
                      dataView: {readOnly: true},        //readOnly只读模式
                      // magicType: {type: ['bar']},
                      saveAsImage: {},
                      // formatter:'{c}'
                  }
              },
              grid: {
                  left: '3%',
                  right: '4%',
                  bottom: '4%',
                  containLabel: true
              },
              xAxis:  {
                  type: 'category',
                  data: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'],
              },
              yAxis: {
                  type: 'value',
                  axisLabel: {
                      show: true,
                      interval: 'auto',
                      formatter: '{value} %'
                      },
                  show: true
              },

              series: [
                  {
                      name: '售后部维修收入',
                       type: 'bar',
                      stack: '总量',
                      label: {
                          normal: {
                              show: true,
                              position: 'insideRight',
                              // formatter: '{c}%'
                              formatter: function (params) {   //格式化函数
                               return a[params.dataIndex]
                              },
                          }
                      },
                      data: this.a1 ,//左3的下面数据
                  },
                  {
                      name: '售后部衍生收入',
                      type: 'bar',
                      stack: '总量',
                      label: {
                          normal: {
                              show: true,
                              position: 'insideRight',
                              // formatter: '{c}%'
                              formatter: function (params) {   //格式化函数
                               return b[params.dataIndex]
                              },
                          }
                      },
                      data:  this.b1//左3的上面数据
                  }
              ]
          };
      myChart.setOption(option2);
        },
        //左2 柱形图
        myEcharts3(){
          var c = this.data4
          var d = this.data5
            var myChart = this.$echarts.init(document.getElementById('main3'));
            var option3 = {
              title: {
                     text: '车辆销售综合收入一览',
                     left: 'center',
                     textStyle:{
                        fontSize:20 //标题大小
                     }},
                tooltip : {
                    trigger: 'axis',
                    axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                        type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                    },
                    formatter:'{b}<br/>{a0} : {c0} %<br/>{a1} : {c1} %'
                },
                toolbox: {
                    show: true,
                    feature: {
                        dataView: {readOnly: true},        //readOnly只读模式
                       // restore: {},
                       // magicType: {type: ['line', 'bar']},
                        saveAsImage: {}
                    }
                },
                legend: {
                  left: 'left',
                    data: ['销售部整车收入', '销售部衍生收入']
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '4%',
                    containLabel: true
                },
                xAxis:  {
                    type: 'category',
                    data: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'],
                },
              yAxis: {
                  type: 'value',
                  axisLabel: {
                      show: true,
                      interval: 'auto',
                      formatter: '{value} %'
                      },
                  show: true
              },
                series: [
                    {
                        name: '销售部整车收入',
                        type: 'bar',
                        stack: '总量',
                        label: {
                            normal: {
                                show: true,
                                position: 'insideRight',
                                // formatter: '{c}%'
                                formatter: function (params) {   //格式化函数
                                 return c[params.dataIndex]
                                },
                            }
                        },
                        data: this.c1 //左2的下面数据
                    },
                    {
                        name: '销售部衍生收入',
                        type: 'bar',
                        stack: '总量',
                        label: {
                            normal: {
                                show: true,
                                position: 'insideRight',
                                // formatter: '{c}%'
                                formatter: function (params) {   //格式化函数
                                 return d[params.dataIndex]
                                },
                            }
                        },
                        data:  this.d1//左2的上面数据
                    }
                ]
            };
        myChart.setOption(option3);
          }
    },
    created() {
      var a = this.data2
      var b = this.data3
      var c = this.data4
      var d = this.data5
        var sum = this.sum
        var sum2 = this.sum2
        var a1 = this.a1
        var b1 = this.b1
        var c1 = this.c1
        var d1 = this.d1
      for (let i = 0; i < a.length; i++) {
        sum.push( a[i]+b[i])
        a1.push(((a[i]/sum[i])*100).toFixed(0))
        b1.push(((b[i]/sum[i])*100).toFixed(0))
      }
      for (let i = 0; i < c.length; i++) {
        sum2.push( c[i]+d[i])
        c1.push(((c[i]/sum2[i])*100).toFixed(0))
        d1.push(((d[i]/sum2[i])*100).toFixed(0))
      }

    },
    mounted() {
      this.myEcharts2();
      this.myEcharts();
      this.myEcharts3();
      this.myLeftTopHeight= 'calc'+'('+this.$refs.myLeftTop.offsetHeight+'px '+'-'+' 10px '+'-'+' 1.7em'+')'  //100
      this.myRight3Height= 'calc'+'('+this.$refs.myRight3.offsetHeight+'px '+'-'+' 19px '+'-'+' 1.17em'+')'  //100
    }
  }
</script>

<style scoped>
  #main{
    color: #EF4C89;
    padding-right: 0;
  }
  .myH1{
    color: #5977d1;
    font-size: 173%;
    margin-bottom: 2px;
    margin-top: 3px;
  }
  .my_H3{
    margin-left: 4px;
    margin-top: 2px;
    text-align: center;
    font-size: 15px;
    padding-left: 12px;
    padding-bottom: -12px;
    margin-bottom: 7px;
  }
  /* 左边 */
  .left{
    width: 65%;
    height: 100%;
  }
  /* 左上 */
  .leftTop{
    width: calc(100% - 9px);
    height: 27%;
    border: 3px solid #545c64;
  }
  /* 左中 */
  .leftMiddle{
    margin-top: 3px;
    width: calc(100% - 9px);
    height: 35%  ;
    border: 3px solid #545c64;
  }
  /* 左下 */
  .leftBottom{
    margin-top: 3px;
    width: calc(100% - 9px);
    height: calc(38% - 24px)  ;
    border: 3px solid #545c64;
  }

  /* 右边 */
  .right{
    width: 35%;
    height: 100%;
  }
  /* 右1 */
  .right1{
    width: calc(100% - 6px);
    height: 27%;
    border: 3px solid #545c64;
  }
  /* 右2 */
  .right2{
    margin-top: 3px;
    width: 100% ;
    height: 19%;
  }
  /* 右3 */
  .right3{
    text-align: center;
    margin-top: 3px;
    width: calc(100% - 6px);
    height:calc( 54% - 18px);
    border: 3px solid #545c64;
  }
  /* 右2上 */
  .right2Top{
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    flex-direction: row;
    width: calc(100%);
    height: calc(46% + 2px);
  }
  /* 右2下 */
  .right2Bottom{
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    flex-direction: row;
    margin-top: 3px;
    width: calc(100%);
    height: calc(52% - 3px);
  }
  /* 右2上右 */
  .right2TopRight{
    text-align: center;
    width: calc(50% );
    height: calc(100% - 6px);
    border: 3px solid #545c64;
  }
  /* 右2上左 */
  .right2TopLeft{
    text-align: center;
    margin-left: 3px;
    width: calc(50%);
    height: calc(100% - 6px);
    border: 3px solid #545c64;
  }
  /* 右2下右 */
  .right2BottomRight{
    text-align: center;
    width: calc(50% );
    height: calc(100% - 6px);
    border: 3px solid #545c64;
  }
  /* 右2下左 */
  .right2BottomLeft{
    text-align: center;
    margin-left: 3px;
    width: calc(50% );
    height: calc(100% - 6px);
    border: 3px solid #545c64;
  }


  .box{
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    flex-direction: row;
    width: 100%;
    height: 100%;
  }
  .myH3{
    margin: 3px ;

  }
</style>
